<template>
  <div>
    <el-link v-if="props.searchType === 0" :style="{ width: '100%' }" @click="initSearch">{{ props.dataText }}</el-link>
    <el-input v-if="props.searchType === 1" v-model="pd.dataText" :style="{ width: '100%' }" readonly :placeholder="props.title">
      <template #prepend>
        <el-button icon="Search" @click="initSearch"></el-button>
      </template>
    </el-input>
    <el-button v-if="props.searchType === 2" type="success" @click="initSearch">{{ props.dataText }}</el-button>
    <el-link v-if="props.searchType === 3" type="success" @click="initSearch">{{ pd.dataText }}</el-link>
    <el-link v-if="props.searchType === 4" type="success" @click="initSearch">{{ props.dataText }}</el-link>
    <el-dialog v-model="pd.open" title="查找批次" width="900" append-to-body>
      <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
        <el-form ref="queryFormRef" :model="pd.queryParams" :inline="true" label-width="68px">
          <el-form-item label="批次" prop="name">
            <el-input v-model="pd.queryParams.hatchName" placeholder="请输入批次" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </transition>
      <el-row>
        <el-table
          ref="refTable"
          v-loading="pd.loading"
          :data="chickenChickInList"
          highlight-current-row
          height="260px"
          @select="select1"
          @select-all="selectAll"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="批次名称" align="center" prop="hatchName" />
          <el-table-column label="属性" align="center" prop="attrId">
            <template #default="scope">
              <dict-tag :options="chick_attr" :value="scope.row.attrId" />
            </template>
          </el-table-column>
          <el-table-column label="品种" align="center" prop="varietiesName" />
          <el-table-column label="供应商" align="center" prop="supplierName">
            <template #default="scope">
              <span>{{ scope.row.supplierName ? scope.row.supplierName : '自繁' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="公鸡数量" align="center" prop="cockNum" />
          <el-table-column label="母鸡数量" align="center" prop="henNum" />
          <el-table-column label="总价" align="center" prop="totalMoney" />
          <el-table-column label="出壳日期" align="center" prop="birthTime" width="180">
            <template #default="scope">
              <span>{{ parseTime(scope.row.birthTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <pagination
        v-show="pd.total > 10"
        v-model:page="pd.queryParams.pageNum"
        v-model:limit="pd.queryParams.pageSize"
        small
        class="mt-4"
        :total="pd.total"
        @pagination="getList"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="pd.open = false">取消</el-button>
          <el-button type="primary" @click="handleSelected"> 确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { parseTime } from '@/utils/ruoyi';
import { listChickenChickIn } from '@/api/farm/chicken/chickenChickIn';
import { ChickenChickInVO } from '@/api/farm/chicken/chickenChickIn/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { chick_attr } = toRefs<any>(proxy?.useDict('chick_attr'));
const queryFormRef = ref<ElFormInstance>();
const chickenChickInList = ref<ChickenChickInVO[]>([]);
const props = defineProps({
  //组件类别。1是输入搜索框，2是按钮搜索框，3link文本样式弹出框，默认是 1 样式。
  searchType: {
    type: Number,
    default: 1
  },
  // 对话框标题
  title: {
    type: String,
    default: '批次查询'
  },
  // 是否单选
  isSingle: {
    type: Boolean,
    default: true
  },
  // 输入的值，用于直接显示
  // 有监控，只要变化，控件自主修改
  dataText: {
    type: String,
    default: ''
  },
  // 数据过滤参数// 用于1、2 样式的
  params: {
    type: Object,
    default: null
  }
});

const pd = reactive({
  open: false,
  reParams: [],
  dataText: '',
  loading: true,
  total: 0,
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    hatchName: undefined,
    cockNum: undefined,
    henNum: undefined,
    includeStockFilter: true, //用于判断库存须大于0
    params: {}
  }
});
/*选中操作，单选模式*/
function select1(selection: ChickenChickInVO[], row: ChickenChickInVO[]) {
  //是否为单选模式
  if (props.isSingle) {
    //清空选项
    (proxy?.$refs['refTable'] as any).clearSelection();
  }
  //将这行选中
  (proxy?.$refs['refTable'] as any).toggleRowSelection(row, true);
}
function selectAll(selection: ChickenChickInVO[]) {
  //是否为单选模式
  if (props.isSingle) {
    //清空选项
    (proxy?.$refs['refTable'] as any).clearSelection();
  }
}
/** 查询商品管理列表 */
//TODO 这里还没处理，必须存栏量大于0的才调用
const getList = async () => {
  pd.loading = true;
  pd.queryParams.cockNum != 0;
  pd.queryParams.henNum != 0;
  const res = await listChickenChickIn(pd.queryParams);
  chickenChickInList.value = res.rows;
  pd.total = res.total;
  pd.loading = false;
};

const emit = defineEmits(['ok']);

/*选择按钮操作*/
const handleSelected = () => {
  pd.reParams = (proxy?.$refs['refTable'] as any).getSelectionRows();
  if (pd.reParams.length === 0) {
    proxy?.$modal.msgError('请选择数据，至少一行!!');
    return;
  }
  pd.reParams.forEach((v, i, a) => {
    pd.dataText = v.name!;
    return;
  });
  pd.open = false;
  emit('ok', pd.reParams);
};
//数据变化页面需要变化,默认null
watch(
  () => props.dataText,
  (val) => {
    pd.dataText = props.dataText as string;
  },
  { deep: true, immediate: true }
);
/** 搜索按钮操作 */
const handleQuery = () => {
  pd.queryParams.pageNum = 1;
  getList();
};

// 初始化1 样式的展示
function initSearch() {
  pd.queryParams = { ...pd.queryParams, ...props.params };
  handleQuery();
  pd.open = true;
}

/** 表单重置 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
};

function clearDataText() {
  pd.dataText = 'null';
}

defineExpose({ initSearch, clearDataText });
</script>

<style scoped></style>
